<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>auto详解</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: burlywood;
        }
        .c1{
            background-color: blue;
            margin:auto;
        }
        .box2,.box3,.box4{
            width:300px;
            height:100px;
            background-color: burlywood;
            margin:0 auto;
        }
        .box2-c1,.box3-c1{
            width:200px;
            height:50px;
            /*margin-left:auto;*/
            /*margin-right: auto;*/
            background-color: blue;
        }
        .box2-c1{
            margin-right: auto;
            margin-left:auto;
        }
        .box3-c1{
            margin-left:auto;
        }
        .box4{
            writing-mode: vertical-lr;
        }
        .box4-c1{
            width:400px;
            height:50px;
            background-color: fuchsia;
            margin-top: auto;
            margin-bottom: auto;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="c1"></div>
</div>
<!--margin做居中-->
<div class="box2">
    <div class="box2-c1"></div>
</div>
<!--margin实现右对齐-->
<div class="box3">
    <div class="box3-c1"></div>
</div>
<!--实现垂直居中就是要改变文档流或者用绝对居中然后设置四个方向都为0；然后margin：auto;-->
<!--内部比外部大怎么办-->
<div class="box4">
    <div class="box4-c1"></div>

</div>
</body>
</html>